import Compatibility from "../tailwind/_compatibility.mdx";
import TwDocs from "../tailwind/_tw-docs.mdx";

# Hover, Focus and Other States

Please refer to the [documentation on the Tailwind CSS website](https://tailwindcss.com/docs/hover-focus-and-other-states) for more information.

## Pseudo-classes <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes" />

:::tip

If a `<View />` has a class which requires an event listener, it will be automatically upgraded to `<Pressable />`.

:::

### Hover, focus, and active <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#hover-focus-and-active" />

NativeWind implements a subset of the Tailwind pseudo-classes by adding event listeners on your components, hence they will only work on components that can accept the listener.

The supported pseudo-classes and their related listeners are:

| Variant  | Event Listeners            |
| -------- | -------------------------- |
| `hover`  | `onHoverIn`, `onHoverOut`  |
| `focus`  | `onBlur`, `onFocus`        |
| `active` | `onPressIn`, `onPressOut`, |

#### Opt in Pointer Events 

React Native 0.71 supports opt-in [Pointer Events](https://reactnative.dev/blog/2023/01/12/version-071#events). If enabled NativeWind will use these instead, allowing for hover support on native when used with a pointer device.

| Variant  | Event Listeners                 |
| -------- | ------------------------------- |
| `hover`  | `onPointerOver`, `onPointerOut` |
| `focus`  | `onBlur`, `onFocus`             |
| `active` | `onPressIn`, `onPressOut`,      |

### First, last, odd, and even <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#first-last-odd-and-even" />


<Compatibility none={["first:", "last:", "odd:", "even:"]} legend={false} />

### Form States <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#form-states" />


<Compatibility partial={["disabled:"]} none={["required:", "invalid:"]} legend={false} />

:::caution

On native, `"disabled:"` is only available for components with a `disabled` prop.

Unfortunately `<TextInput>` uses `enabled={false}` instead of `disabled={true}`, so it will not work with `"disabled:"`.

:::

:::info

We are looking for contributors to add more support for `"disabled:"`.

:::


### Styling based on parent state <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state" />

**Styling based on parent state (group-\{modifier\})**

NativeWind supports the [`group`](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state) class name and it can be used with any supported modifier.

**Differentiating nested groups**

NativeWind supports the [`group/{name}`](https://tailwindcss.com/docs/hover-focus-and-other-states#differentiating-nested-groups) class name and it can be used with any supported modifier

**Arbitrary groups**

<Compatibility supported={["Class selectors", "Attribute selectors"]} none={["Pseudo-classes selectors", "Pseudo-elements selectors", "Elements selectors", "Moving group via `&`"]} legend={false} />

:::tip

Native supports multiple selectors, e.g `group-[.classOne.classTwo[attribute=value]]`

:::


### Styling based on sibling state <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state" />

**Styling based on parent state (peer-\{modifier\})**

<Compatibility none={["peer", "peer-*", "peer-invalid"]} legend={false} />

### Styling direct children <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-direct-children" />

**Styling based on parent state (*-)**

<Compatibility none={["*-"]} legend={false} />

### Styling based on descendants <TwDocs href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-descendants" />

**Styling based on descendants (has-\{modifier\})**

<Compatibility none={["has-"]} legend={false} />

:::info

We are looking for contributors to add more support for `has-`.

:::

## Pseudo-elements

### Placeholder text

:::tip

On native, `placeholder:` only supports the `text-*` or `color-*` classes. It will map to the `placeholderTextColor` on native.

We are looking for contributors to add more support for `placeholder:`.

:::

<Compatibility partial={["placeholder:"]} legend={false} />

## Media and feature queries

### Responsive breakpoints

To style an element at a specific breakpoint, use responsive modifiers like `md` and `lg`.

Check out the [Responsive Design](./responsive-design) documentation for an in-depth look at how these features work.

### Prefers color scheme

Please read the [Dark Mode](./dark-mode) documentation for an in-depth look at how this feature works.

<Compatibility supported={["dark:"]} legend={false} />

### Prefers reduced motion

<Compatibility supported={["motion-reduce:"]} legend={false} />

### Viewport orientation

Use the portrait and landscape modifiers to conditionally add styles when the viewport is in a specific orientation.

<Compatibility supported={["portrait:", "landscape:"]} legend={false} />

### Print styles

Use the print modifier to conditionally add styles that only apply when the document is being printed:

<Compatibility none={["print:"]} legend={false} />

### Supports rules

Use the supports-[...] modifier to style things based on whether a certain feature is supported in the user’s browser.

<Compatibility none={["supports-[n]:"]} legend={false} />

### Attribute selectors

Use the aria-\* modifier to conditionally style things based on ARIA attributes.

<Compatibility none={["aria-[n]:"]} legend={false} />

### Data selectors

Use the data-\* modifier to conditionally style things based on data attributes.

<Compatibility none={["data-[n]:"]} legend={false} />

### RTL support

Use the rtl and ltr modifiers to conditionally add styles in right-to-left and left-to-right modes respectively when building multi-directional layouts:

<Compatibility supported={["ltr:", "rtl:"]} legend={false} />

### Open/closed state

Use the open modifier to conditionally add styles when a `<details/>` or `<dialog/>` element is in an open state:

<Compatibility none={["open:"]} legend={false} />

## Custom modifiers

Custom modifiers are possible, but are not yet documented. More information to come.